<template>
  <div class="p-2">
    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
      <div class="mb-[10px]" v-show="showSearch">
        <el-card shadow="hover">
          <el-form ref="queryFormRef" :model="queryParams"   :inline="true" label-width="110px" label-suffix=":">
            <el-form-item label="创建时间" >
              <el-date-picker
                v-model="dateRange"
                style="width: 240px"
                value-format="YYYY-MM-DD"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="代理商名称" >
              <el-input  v-model="queryParams.params.channel_name" placeholder="请输入代理商名称" clearable style="width: 240px"  />
            </el-form-item>
            <el-form-item label="代理商编号" >
              <el-input   v-model="queryParams.params.channel_no" placeholder="请输入代理商编号" clearable style="width: 240px"/>
            </el-form-item>
            <el-form-item label="代理商级别">
              <el-select  v-model="queryParams.params.dw_level" placeholder="代理商级别" clearable style="width: 240px">
                <el-option v-for="dict in agent_level" :key="dict.value" :label="dict.label" :value="dict.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="账户状态" >
              <el-select v-model="queryParams.status"  placeholder="账户状态" clearable style="width: 240px">
                <el-option v-for="dict in acc_status" :key="dict.value" :label="dict.label" :value="dict.value" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleQuery" icon="Search"  >搜索</el-button>
              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>
        </el-card>

      </div>
    </transition>



    <el-card shadow="hover">
      <el-table ref="roleTableRef"  v-loading="tableloading"  :data="operList"  border>
        <el-table-column label="创建时间" align="center" prop="addTime"  width="180" >
          <template #default="scope">
            <span>{{ parseTime(scope.row.addTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="代理商名称"  align="center" prop="channelName" width="220" />
        <el-table-column label="代理商编号"  align="center" prop="channelNo" :show-overflow-tooltip="true" width="250" />
        <el-table-column label="总收益(元)"  align="center" prop="balance" :show-overflow-tooltip="true" width="200" >
          <template #default="scope">
              <span>{{ convertFenToYuan(scope.row.balance) }}</span>
            </template>
        </el-table-column>
        <el-table-column label="总提现(元)"  align="center" prop="cashout" width="150" >
          <template #default="scope">
                <span>{{ convertFenToYuan(scope.row.cashout) }}</span>
              </template>
          </el-table-column>

        <el-table-column label="可用余额(元)" align="center" prop="unitNo" width="150" >
          <template #default="scope">
                <span>{{ convertFenToYuan(scope.row.balance - scope.row.frozen) }}</span>
              </template>
          </el-table-column>
        <el-table-column label="昨日收益(元)" align="center" prop="yesterday" width="150" >
          <template #default="scope">
                <span>{{ convertFenToYuan(scope.row.yesterday) }}</span>
              </template>
          </el-table-column>
        <el-table-column label="账户状态" align="center" prop="status" >
          <template #default="scope">
            <dict-tag :options="acc_status" :value="scope.row.status" />
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-if="total > 0"
        v-model:total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </el-card>



  </div>

</template>

<script  setup name="balance" lang="ts">

import {listBalance} from "@/api/agent/balance";
  const router = useRouter();
  const { proxy } = getCurrentInstance() as ComponentInternalInstance;
  const queryFormRef = ref<ElFormInstance>();
  const tableloading = ref(false)
  const operList = ref([])
  const total = ref(0)
  const queryParams = ref({
    params:{
      begin_time:"",
      end_time:"",
      channel_name:"",
      channel_no:"",
      dw_level:"",
      orderByColumn:""
    },
    status:"",
    pageSize:10,
    pageNum:1
  });
  const showSearch = ref(true);
  const dateRange = ref(['', '']);
  const { agent_level } = toRefs<any>(proxy?.useDict('agent_level'));
  const { acc_status } = toRefs<any>(proxy?.useDict('acc_status'));

  const convertFenToYuan = (fen)=>{
    if(!fen && fen !== 0){
      return '--';
    }
    return (fen / 100).toFixed(2);
  }

  /** 重置按钮操作 */
  const resetQuery = () => {
    dateRange.value = ['', '']
    queryFormRef.value?.resetFields();
    queryParams.value.pageNum = 1;
  }

/**  查询 */
  const handleQuery = ()=>{
    queryParams.value.pageNum = 1;
    if(dateRange.value && dateRange.value.length > 0){
      queryParams.value.params.begin_time = dateRange.value[0]
      queryParams.value.params.end_time = dateRange.value[1]
    }else{
      queryParams.value.params.begin_time = null
      queryParams.value.params.end_time = null
    }

    getList();
  }

 /**
  * 查询列表
  */
 const getList = () => {
   tableloading.value = true
   listBalance(queryParams.value).then(res => {
     operList.value = res.rows
     total.value = res.total
     tableloading.value = false
   })
 }


  onMounted(() => {
    getList();
  });

</script>

<style>
</style>
